$(() => {

    // 业务1：获取统计数据
    const getDataInfo = () => {
        myajax('GET', '/admin/data/info', {}, (res) => {
            console.log(res);
            const htmlStr = template('moban', res)
            $('.spannel_list').html(htmlStr)

        })
    }
    getDataInfo()


    // 初始化echarts实例 线形图

    const echartLine = (dates, datas) => {
        let myChart = echarts.init(document.getElementById('curve_show'));

        option = {
            title: {
                text: '文章日新增趋势',
                left: 'center'
            },
            grid: [{
                left: 50,
                top: 50,
                right: 50,
                bottom: 40,
            }],
            color: [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                }, {
                    offset: 1, color: '#fff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dates,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: datas,
                    type: 'line',
                    smooth: true,
                    areaStyle: {}
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }


    //   1.发送请求 获取线形图数据
    function getLine_Data() {
        myajax('GET', '/admin/data/article', null, (res) => {
            // 2.处理数据
            let dates = []
            let datas = []
            // res.date.forEach(function (item) {
            //     dates.push(item.date)
            // })
            // console.log(dates);
            // dates = res.date.map(function (value) {
            //     return value.date
            // })
            // datas = res.date.map(function (value) {
            //     return value.count
            // })
            // dates = res.date.map((item) => {
            //     return item.date
            // })
            dates = res.date.map((item) => item.date)
            datas = res.date.map((item) => item.count)

            // 发送请求后 调用带处理的数据 传入线状图
            echartLine(dates, datas)

        })
    } getLine_Data()

    // 生成饼图
    const getPie = (arr) => {
        let myChart = echarts.init(document.getElementById('pie_show'));
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: arr
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    // 发送请求获取 饼图数据
    const getPie_data = () => {
        myajax('GET', '/admin/data/category', null, (res) => {
            // console.log(res);
            const arr = res.date.map((item) => ({ value: item.articles, name: item.name }))
            getPie(arr)
        })

    }
    getPie_data()


    // 生成柱状图
    const getBar = (date, count) => {
        let myChart = echarts.init(document.getElementById('column_show'));
        option = {

            xAxis: {
                type: 'category',
                data: date,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: count,
                    type: 'bar',
                    barWidth: 40,

                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    // 发送请求获取 饼图数据
    const getBar_data = () => {
        myajax('GET', '/admin/data/visit', null, (res) => {
            console.log(res);
            //   获取对象所有的键和值
            let date = Object.keys(res.data)
            let count = Object.values(res.data)
            // for (const key in res.data) {
            //     date.push(key)
            //     count.push(res.data[key])

            // }

            getBar(date, count)
        })

    }
    getBar_data()


})